<template>
  <div style="margin-top: 16px">
    <el-form label-width="100px" size="small" >
      <el-form-item label="选择流程">
        <el-select v-model="callActivityTaskForm.calledElement" @change="updateElementTask('calledElement')">
          <el-option
            v-for="(item,index) in taskList"
            :key="index"
            :label="item.name"
            :value="item.flowKey"
          />
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {callActivityList} from "@/api/flowable/definition";

export default {
  name: "CallActivityTaskPanel",
  props: {
    id: {
      type: String,
      required: true
    },
  },
  data() {
    return {
      defaultTaskForm: {
        calledElement: "",
      },
      callActivityTaskForm: {},
      taskList: []
    };
  },
  watch: {
    id: {
      immediate: true,
      handler() {
        this.bpmnElement = this.modelerStore.element;
        this.$nextTick(() => this.resetTaskForm());
      }
    }
  },
  created() {
    this.getTaskList();
  },
  methods: {
    resetTaskForm() {
      for (let key in this.defaultTaskForm) {
        let value = this.bpmnElement?.businessObject[key] || this.defaultTaskForm[key];
        this.$set(this.callActivityTaskForm, key, value);
      }
      this.deleteElementFormExtensions();
    },

    getTaskList() {
      callActivityList().then(response => {
        this.taskList = response.data;
      })
    },

    updateElementTask() {
      let taskAttr = Object.create(null);
      // 引用父流程的所有流程变量
      taskAttr.inheritVariables = true;
      taskAttr.calledElement = this.callActivityTaskForm.calledElement || null;
      console.log(taskAttr,"taskAttr")
      this.modelerStore.modeling.updateProperties(this.bpmnElement, taskAttr);
      // this.modelerStore.modeling.updateProperties(this.bpmnElement, {'flowable:inheritVariables':true});
    },

    // 新建节点时,默认是用户节点,会添加表单相关扩展属性,当前任务直接删除掉
    deleteElementFormExtensions() {
      const element = this.modelerStore.element;
      if (element.businessObject?.extensionElements?.values) {
        element.businessObject.extensionElements.values =
          element.businessObject.extensionElements.values.filter(ex => ex.$type !== 'flowable:FormItems');
      }
    }
  },
  beforeDestroy() {
    this.bpmnElement = null;
  }
};
</script>
